<template>
	<view class="login">
		<view class="foot-action head-fixed child-view">
			<!-- 头部导航 -->
			<view class="w-750 title" style="position: fixed; top: 0; left: 0; z-index: 999;">
				<view class="h-100 w-row-justify-between-align">
					<view class="wh-80 w-row-center" >
<!--						<image class="wh-40" src="@/static/gane/goBack-icon.png"></image>-->
					</view>
					<view class="w-350 h-100 w-row-center w-wz-conts font-36">
						<text>绑定手机号</text>
					</view>
					<view class="wh-80 w-row-center">
					</view>
				</view>
			</view>
			<view class="bwh-120"></view>
			<!-- 头部导航结束 -->

			<view class="cover-tw index-bg absolute-default fixed">

			</view>

			<view class="content-box padding-top-xs">
				<!-- <view class="padding padding-top-sm">
					<view class="text-lg text-bold text-color-black">
						欢迎来到六合国际娱乐
					</view>

				</view> -->

				<form class="van-form login">
					<view class="van-cell-group van-cell-group--inset">
						<view class="van-cell van-field van-field--label-top">
							<view class="van-cell__title van-field__label van-field__label--top">
								<label for="van-field-7-input">手机号</label>
							</view>

							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input type="text" id="van-field-7-input" v-model="formData.phone" name="username" @input="checkPhone"
										class="van-field__control" placeholder="请填写手机号" :maxlength="11"
										aria-labelledby="van-field-7-label">
									<view class="van-field__button">
										<button type="button" class="van-button van-button--warning van-button--small" :disabled="isPhone" id="captcha-button">
											<div class="van-button__content">
												<span class="van-button__text" v-if="count">重新获取{{count < 10 ? '0'+count :count}}秒</span>
												<span class="van-button__text" v-else>发送验证码</span>
											</div>
										</button>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="van-cell-group van-cell-group--inset">
						<view class="van-cell van-field van-field--label-top">
							<view class="van-cell__title van-field__label van-field__label--top">
								<label for="van-field-7-input">验证码</label>
							</view>

							<view class="van-cell__value van-field__value">
								<view class="van-field__body">
									<input type="text" id="van-field-7-input" v-model="formData.code" name="username"
										class="van-field__control" placeholder="请填写验证码"
										aria-labelledby="van-field-7-label" />
								</view>
							</view>
						</view>
					</view>
				</form>

				<view class="padding">
					<button type="submit" class="van-button van-button--primary van-button--normal van-button--block" @click="phoneLogin" :disabled="login_loading">
						<div class="van-button__content"><span class="van-button__text">立即绑定</span></div>
					</button>

					<!-- <div class="margin-top-sm text-center text-color-grey">登录即注册，距离致富只差10秒</div> -->
				</view>

			</view>
		</view>
    <!-- 自定义弹窗 -->
    <view class="custom-modal" v-if="showModal">
      <view class="modal-mask" @click="closeModal"></view>
      <view class="modal-container">
        <view class="modal-header">
          <text class="modal-title">温馨提示</text>
        </view>
        <view class="modal-content">
          <text class="modal-text">尊敬的会员您好，微信首次登录需绑定手机号码作为主账号，请您务必完成绑定。</text>
        </view>
        <view class="modal-footer">
          <button class="confirm-btn" @click="closeModal">确定</button>
        </view>
      </view>
    </view>

    <div id="captcha-element"></div>
	</view>
</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				isPhone:true,
				formData: {
					phone: null,
					code: null
				},
        wxData:{
          openid: null,
          nickname: null,
          headimgurl:null,
          agent_code:null
        },
				count: null,
				timer: null,
				agent_code: uni.getStorageSync('agent_code') || '',
				login_loading:false,
				captcha: null,
				captchaButton: null,
        isWechatBrowser: true,
        showModal:true,
			}
		},

    mounted() {
      // 显示提示弹窗


      this.captchaButton = document.getElementById('captcha-button');

      window.initAliyunCaptcha({
        SceneId: 'bv3tympas', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
        prefix: '14sny91', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
        mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
        element: '#captcha-element', // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
        button: '#captcha-button', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
        captchaVerifyCallback: this.captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
        onBizResultCallback: this.onBizResultCallback, // 业务请求结果回调函数，无需修改
        getInstance: this.getInstance, // 绑定验证码实例函数，无需修改
        slideStyle: {
          width: 360,
          height: 40,
        }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
        language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
      });
    },
    beforeUnmount() {
      this.captchaButton = null;

      // 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
      document.getElementById('aliyunCaptcha-mask')?.remove();
      document.getElementById('aliyunCaptcha-window-popup')?.remove();
    },
		methods:{
      openMsg() {
        this.showModal = true;
      },

      closeModal() {
        this.showModal = false;
      },
      checkPhone() {
        if (this.isMobile(this.formData.phone)) {
          this.isPhone = false;
        }else{
          this.isPhone = true;
        }

      },
      getInstance(instance) {
        this.captcha = instance;
        console.log(this.captcha);
      },
      async captchaVerifyCallback(captchaVerifyParam) {

        const result = await  $H.post('/aliyunVerify', {
          captchaVerifyParam: captchaVerifyParam,
          phone:this.formData.phone,
        });
        if(result.code==200 && result.data=="T001"){
          return {
            captchaResult: true,
            bizResult: true,
          }
        }else{
          return uni.showToast({
            title: result.msg,
            duration: 1000,
            icon: 'none'
          });
        }
      },
      // 验证通过后调用
      onBizResultCallback(bizResult) {
        if(bizResult){
          this.getPhoneCode()
        }
      },
      // 弹出验证框，popupId为组件id，用于支持验证通过后继续触发业务逻辑
      popup(popupId) {
        this.popupId = popupId;
        this.captchaButton.click();
      },
			// 获取验证码
			getPhoneCode() {
			  let TIME_COUNT = 60;
			  if (!this.timer) {
			    this.showCode = true
			    this.count = TIME_COUNT;
			    this.timer = setInterval(() => {
			      if (this.count > 0 && this.count <= TIME_COUNT) {
			        this.count--
			      } else {
			        this.showCode = false
			        clearInterval(this.timer);
			        this.timer = null;
			      }
			    }, 1000);
			  }
			},

			getMessage() {
			  if (!this.isMobile(this.formData.phone)) {
			    return uni.showToast({
			      title: '手机号码输入有误',
			      duration: 1000,
			      icon: 'none',
			      position: 'top'
			    });
			  }
			  uni.showLoading({mask: true})
			  $H.post('/app_user_get_message', {
			    phone: this.formData.phone,
			    type: 'sign'
			  }).then((res) => {
			    uni.hideLoading()
			    if (res.code == 200 && res.msg=='短信发送成功') {
			      this.getPhoneCode()
			      return uni.showToast({
			        title: res.msg,
			        duration: 3000,
			        icon: 'none',
			        position: 'top'
			      });
			    } else {
			      return uni.showToast({
			        title: res.msg,
			        duration: 1000,
			        icon: 'none',
			        position: 'top'
			      });
			    }
			  })
			},

			isMobile(mobile) {
			  return /^1[3-9]\d{9}$/.test(mobile)
			},

			routerIndex(){
				uni.reLaunch({
				  url: '/pages/index/index'
				});
			},

			toIm(){
				uni.reLaunch({
					url: '/pages/im/imdetails'
				});
			},

			phoneLogin() {

			  for(let i in this.formData) {
				  if(!this.formData[i]) {
					  return uni.showToast({
					    title: '手机号或验证码不能为空',
					    duration: 1000,
					    icon: 'none'
					  });

				  }
			  }
        // console.log({
        //   type: 'login',
        //   phone: this.formData.phone,
        //   code: this.formData.code,
        //   agent_code: this.agent_code
        //   // password: this.password,
        //   // imgcode: this.imgcode
        // });
        this.login_loading = true;
			  if (this.isMobile(this.formData.phone)) {
			    $H.post('/app_user_phone_bind', {
			      type: 'login',
			      phone: this.formData.phone,
			      code: this.formData.code,
			      agent_code: this.agent_code
			      // password: this.password,
			      // imgcode: this.imgcode
			    }).then((res) => {
			      if (res.code == 200) {

			        this.show = true
			        this.UserInfo = res.data
					// console.log(res.data,'data')
			        uni.setStorageSync('UserInfo', res.data)

			        uni.showToast({
			          title: res.msg,
			          duration: 1000,
			          icon: 'none'
			        });
			        return uni.reLaunch({
			          url: '/pages/index/index'
			        });

			      } else {
              this.login_loading = false;
			        // this.tabCode()
			        return uni.showToast({
			          title: res.msg,
			          duration: 1000,
			          icon: 'none'
			        });
			      }
			    })
			  } else {
          this.login_loading = false;
			    return uni.showToast({
			      title: '手机号码有误',
			      duration: 1000,
			      icon: 'none'
			    });
			  }
			},
		}
	}
</script>

<style scoped lang="scss">
	body {
		color: #535d76;
		background-color: #f0f3ff;
		font-size: 3.46667vw;
	}

	.child-view {
		transition: all .35s;
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #f0f3ff;

		.title {
			.w-wz-conts {
				color: #323233 !important;
			}

		}

		.content-box {
			height: calc(100% - 26.93333vw);
			position: fixed;
			top: 12.8vw;
			left: 0px;
			right: 0px;
			bottom: 14.13333vw;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1;
			padding-bottom: 3.2vw;

			.login {
				.van-cell-group {
					background: none !important;

					.van-field {
						line-height: 8vw;
					}

					.van-field__body {
						flex: 1;
					}

					.van-cell__value {
						align-items: center;
					}

					.van-cell {
						background: none !important;
					}

					.van-field__button {
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.van-cell-group--inset {
					margin: 0 4.26667vw;
					border-radius: 2.13333vw;
					overflow: hidden;
				}
			}
		}
	}

	.index-bg {
		background-image: url('@/static/mine/login-bg.png');
	}
  // 自定义弹窗样式
  .custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    .modal-mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .modal-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      background-color: #fff;
      border-radius: 10rpx;
      overflow: hidden;
    }

    .modal-header {
      padding: 30rpx;
      text-align: center;
      border-bottom: 1rpx solid #eee;

      .modal-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .modal-content {
      padding: 40rpx 30rpx;
      text-align: center;

      .modal-text {
        font-size: 28rpx;
        color: #e43d33; // 红色字体
        font-weight: bold; // 加粗
        line-height: 1.6;
      }
    }

    .modal-footer {
      padding: 30rpx;
      text-align: center;

      .confirm-btn {
        width: 100%;
        height: 80rpx;
        background-color: #e43d33;
        color: #fff;
        border: none;
        border-radius: 10rpx;
        font-size: 32rpx;
      }
    }
  }
</style>